<template>
	<div>
		<div>
			<img
				v-if="isShowImg1"
				class="img"
				src="https://img2.baidu.com/it/u=3202947311,1179654885&fm=253&fmt=auto&app=138&f=JPEG?w=800&h=500"
				alt=""
			/>
			<img
				v-show="isShowImg2"
				class="img"
				src="https://img1.baidu.com/it/u=413643897,2296924942&fm=253&fmt=auto&app=138&f=JPEG?w=800&h=500"
				alt=""
			/>
		</div>
		<button @click="showImg1">Show Image 1</button>
		<button @click="showImg2">Show Image 2</button>
	</div>
</template>

<script>
export default {
	name: 'App',
	data() {
		return {
			isShowImg1: true,
			isShowImg2: true,
		}
	},
	methods: {
		showImg1() {
			this.isShowImg1 = !this.isShowImg1
		},
		showImg2() {
			this.isShowImg2 = !this.isShowImg2
		},
	},
}
</script>

<style>
.img {
	width: 200px;
}
</style>
